<template>
   <div class="page">
                    <ul>
                        <li>
                                <button 
                                @click="$emit('Button_pagin',pageNo-1)" 
                                :disabled='pageNo==1'
                                > 
                                <i class="iconfont icon-normal1"></i>
                                上一页
                            </button>
                        </li>
                        <!-- 如果起始页不等于1 则显示该li  (1)  -->
                        <li 
                            v-if="GetStart_End.StartNum != 1">
                            <button 
                                @click="$emit('Button_pagin',1)">1</button>
                        </li>
                        <!-- 如果起始页 大于 2 则显示li (...) -->
                        <li 
                            v-if="GetStart_End.StartNum > 2">
                            <button>...</button>
                        </li>
                        <!-- 循环结束页（也可以循环数字）  如果结束页 大于等于 循环数   则显示分页数 -->
                        <li 
                            v-for="num in GetStart_End.EndNum||[] " 
                            :key="num" 
                            v-if="num >= GetStart_End.StartNum"
                            :class="{'page_noborder':num == pageNo}"
                            >
                            <button @click="$emit('Button_pagin',num)">{{num}}</button>
                        </li>
                        <!-- 如果结束页 小于 （总页 - 1）则显示li （...） -->
                        <li v-if="GetStart_End.EndNum < pageNum - 1">
                            <button>...</button>
                        </li>
                        <!-- 如果结束页 不等于 总页  则不显示总页数 -->
                        <li 
                            v-if="GetStart_End.EndNum != pageNum">
                            <button @click="$emit('Button_pagin',pageNum)">{{this.pageNum}}</button>
                        </li>
                        <li >
                            <button @click="$emit('Button_pagin',pageNo+1)" :disabled='pageNo==pageNum'>
                                下一页
                                <i class="iconfont icon-normal"></i>
                            </button>
                            
                        </li>
                    </ul>
                    <span>共{{this.total}}页</span>
                </div>
</template>

<script>
export default {
    name:'Pagination',
    // pageNo：当前第几个   pageSize:代表每一页展示多少条数据   
    // total：代表整个分页一共要展示多少条数据  continues：代表分页连续码个数     
    props:['pageNo','pageSize','total','continues'],
    computed:{
        // 总页数
        pageNum(){
            // Math.ceil表示向上取整   总条数/每页展示多少条 = 有多少页（并且向上取整）
            return Math.ceil(this.total/this.pageSize)
        },
        GetStart_End(){
                // 结构赋值
                   let {pageNum,pageNo,continues} = this
                // 取出连续码个数的左右的平均值
                   let num = Math.floor(continues/2)
                //起始页
                   let StartNum = pageNo - num
                //结束页
                   let EndNum = pageNo + num;
                // 如果分页连续码个数 大于 总页数  则起始页等于1  结束页等于总页数
                 if(continues > pageNum){
                        StartNum = 1
                        EndNum = pageNum
                 }else{
                    //  如果起始页小于1  则起始页等于1  结束页等于连续页
                      if(StartNum < 1){
                            StartNum = 1
                            EndNum = continues
                     }
                    // 如果结束页大于总页数  则结束页等于总页数   起始页等于 总页 - 连续页 + 1
                     if(EndNum > pageNum){
                         EndNum = pageNum
                         StartNum = pageNum - continues +1
                     }
                 }
                //  返回   起始页 与 结束页
                return {StartNum,EndNum}
        }

    }
}
</script>

<style scoped lang='less'>
 .page{
            display: flex;
            justify-content: center;
            margin-top: 30px;
            ul{
                display: flex;
                justify-content: center;
                li{
                      margin-right: 3px;
                    button{
                        cursor: pointer;
                        padding: 8px 16px;
                        line-height: 18px;
                        border: 1px solid #e0e9ee;
                        i{
                            // padding-top: 10px;
                            vertical-align: middle;
                        }
                    }
                }
                
                .none{
                    pointer-events: none;
                }
                .page_noborder{
                     button{
                         background-color: red;
                         color: #fff;
                     }
                }
            }
            span{
                margin-left: 20px;
                float: left;
            }
        }
</style>